<template>
	<view class="page-diaoyong">
		<navBar title="监控解绑" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
		<view class="top-box">
			<view class="box-item pro">
				<text class="item-line">项目名称：{{detailObjInfo.pmName || ''}}</text>
			</view>
			<view class="box-item" v-for="item in detailObjInfo.planConstructionSiteSectionList">
				<text class="item-line">{{item.lineName}}</text>
				<text class="item-line" style="margin-left: 20rpx;">{{item.lineSiteSectionName || ''}}</text>
			</view>
		</view>
		<view class="equip-box">{{!isBind   ? '待解绑的监控设备' : '绑定的监控设备'}}</view>
		<scroll-view :scroll-y="true" :style="{height: !isBind ? 'calc(100vh - 440px)' : 'calc(100vh - 290px)'}">
			<view class="item-box" v-for="(item, index) in dataList" :key="index">
				<view class="shebei">{{item.name || ''}}</view>
				<view class="box-detail" v-for="(key,ki) in item.list" :key="ki">
					<view class="detail-icon">
						<text>设备编号:{{key.code || ''}}</text>
						<u-checkbox-group v-if="!isBind">
							<u-checkbox v-model="value" @change="changeRadio($event,key)" :checked="key.isBind"
								shape="circle" active-color="blue">1</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="detail-icon">
						<text>规格型号:{{key.specificationModel || ''}}</text>
					</view>
					<view class="detail-icon">
						<text>所属基地:{{key.stationName || ''}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 按钮 -->
		<view class="footer-button" v-if="!isBind">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="cancel" class="button-error">取消</button>
				<button @click="relieveDevice" class="button-primary">解绑</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pmBindEqGetDetail,
		pmBindEqReleaseEqs
	} from '@/api/comprehensive/comprehensive.js'
	export default {
		data() {
			return {
				value: 1,
				dataList: [],
				isBind: undefined,
				detailObjInfo: {} //详情信息
			}
		},
		onLoad(option) {
			if (option && option.detailInfo) {
				let obj = JSON.parse(option.detailInfo)

				this.isBind = obj.isAllRelease
				this.getDetail(obj.id)

			}
		},
		methods: {
			changeRadio(val, item) {
				item.isBind = val;
			},
			getDetail(id) {
				pmBindEqGetDetail({
					id: id
				}).then(res => {
					this.detailObjInfo = res.result
					this.$set(this.detailObjInfo,'lineName',`${res.result.lineOrSpecialName}${res.result.branchLineName ? '(' + res.result.branchLineName + ')' : ''}`  || '')
					let filterArr = res.result.pmBindEqItemList
					if (!this.isBind) {
						filterArr = filterArr.filter(item => item.isBind)
					}
					this.dataList = this.findDuplicates(filterArr)
				})
			},
			cancel() {
				uni.navigateBack()
			},
			//解绑设备
			relieveDevice() {
				console.log(this.dataList);
				let resultArr = [];
				for (let key in this.dataList) {
					const list = this.dataList[key].list
					const arr = []
					for (var i = 0; i < list.length; i++) {
						if (list[i].isBind) {
							arr.push(list[i].deviceId)
						}
					}
					arr.length && resultArr.push(...arr)
				}
				console.log(resultArr);
				if (resultArr.length <= 0) {
					return uni.showToast({
						title: '请选择需要解绑的设备',
						icon: 'none'
					})
				}
				pmBindEqReleaseEqs({
					deviceIds: resultArr
				}).then(res => {
					// console.log(res,'解绑接口')
					if (res.success && res.status === 1) {
						uni.showToast({
							title: res.message,
							icon: 'success'
						})
						setTimeout(() => {
							// uni.navigateBack({})
							var pages = getCurrentPages();
							var prevPage = pages[pages.length - 2]; //上一个页面
							prevPage.$vm.returnData(true)
							uni.navigateBack();
						}, 1800)
					}
				})

			},
			// 定义一个辅助函数，用于查找具有相同deviceName属性的项
			findDuplicates(arr) {
				const duplicates = {};
				arr.forEach(item => {
					if (!duplicates[item.deviceName]) {
						duplicates[item.deviceName] = {
							list: [],
							name: item.deviceName
						};
					}
					duplicates[item.deviceName].list.push({
						...item,
						name: item.deviceName
					});
				});

				return duplicates;
			},
			goBack() {
				uni.navigateBack({})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-diaoyong {
		padding: 30rpx 0;
		height: 100%;
		background-color: #f5f5f9;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;

		/* #endif */
		.top-box {
			background-color: #fff;
			padding: 30rpx;

			.box-item {
				font-size: 28rpx;
				font-weight: 500;
				color: #445469;

				.item-pro {
					width: 160rpx;
				}

			}

			.box-item.pro {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #22204E;
				margin-bottom: 20rpx;
			}
		}
	}

	.item-box {
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 10rpx;

		// height: calc(100vh - 250px);
		.shebei {
			padding: 20rpx;
			background-color: #fff;
			border-bottom: 1px solid #dededf;
			font-size: 16px;
			font-weight: bold;
			color: #445469;
		}


		.box-detail {
			padding: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #445469;
			border-bottom: 1px solid #dededf;

			.detail-icon {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 6rpx 0;

			}
		}

		.box-detail:last-of-type {
			border-bottom: none
		}
	}

	/deep/ .u-radio-group {
		flex: 0;
	}

	.equip-box {
		font-size: 32rpx;
		font-weight: bold;
		color: #22204E;
		margin: 30rpx;
	}
</style>